<template>
  <section id="dynamic_author">
    <div class="leftBox">
      <div class="leftbox" v-if="!headHide">
          <img :src="value.head?addPath(value.head):favicon" />
      </div>
      <div class="right">
          <div class="title">
            {{value.nickname ||value.name }}
          </div>
          <div class="row">
            <div class="date">
              {{value.publishDate? $.timeFilter(value.publishDate) : $.timeFilter(value.sendData)}}
            </div>
            <div v-if="!isComment&&$.userId === value.id" class="delete" v-tap="{methods:deleteDynamic}">删除</div>
          </div>
      </div>
    </div>
      <div class="rightBox">
        <div v-if="followShow" v-tap="{methods:follow,id:value.id,postType:value.postType}" class="follow">{{value.hasFollow == '0'?'关注':'已关注'}}</div>
        <img v-if="isComment&&value.id == $.userId" :src="down" class="righter" v-tap="{methods: showBottomSheet, removeData: value, removeIndex: index}" />
      </div>
  </section>
</template>
<script>
import DeleteSpaceService from "services/community/DeleteSpace";
import CreateFollow from "services/community/CreateFollow";
import DeleteFollow from "services/community/DeleteFollow";
import favicon from 'assets/favicon.png'
import down from "assets/down-gray.svg";
export default {
  name: "dynamic_author",
  data() {
    return {
      down,
      favicon
    };
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    },
    index:'',
    followShow:false,
    isComment:false,
    id:'',
    headHide:false
  },
  methods: {
    deleteDynamic() {
      let vm = this;
      this.$.confirm(
        {
          msg: "确认删除吗？"
        },
        () => {
          DeleteSpaceService.bind(vm)(
            {
              ids: [vm.id]
            },
            res => {
              // 删除成功则向父组件发送removeSuccess事件
              vm.$emit("removeSuccess");
              console.log(res);
            }
          );
        }
      );
    },
    follow(params) {
      if(this.$.userId){
        if(params.postType === 'topic'){
            params.postType = 'fleet'
          }
          if (this.value.hasFollow === "0") {
            //  关注
            CreateFollow.bind(this)(
              {
                type: params.postType,
                refId: params.id
              },
              res => {
                this.value.hasFollow = "1";
              }
            );
          } else {
            // 取消关注
            DeleteFollow.bind(this)(
              {
                type: params.postType,
                refId: params.id
              },
              res => {
                console.log(res);
                this.value.hasFollow = "0";
              }
            );
          }
      }else{
        this.$.goLogin({
            name: "login"
          });
      }
      
    },
    showBottomSheet(params){
      params = JSON.stringify(params)
      // console.log(params)
      this.$emit('showBottomSheet',params)
    }
  }
};
</script>
<style lang="scss" scoped>
#dynamic_author {
  padding: 1em 8px;
  display: flex;
  flex: 1 1 10;
  justify-content: space-between;
  .leftBox{
    display:flex;
  }
  .rightBox{
    display:flex;
  }
  .leftbox {
    flex-grow: 1;
    padding: 4px;
    img {
      width: 40px;
      height: 40px;
      flex: 1 1 0;
      border-radius: 20px;
      overflow: hidden;
    }
  }
  .right {
    flex-grow: 5;
    flex: 4 1 1;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 4px;
    .title {
      font-size: 16px;
      margin-bottom: 6px;
    }
  }
  .row .date {
    color: #999;
    margin-right: 1em;
  }
  .delete {
    color: #f98700;
  }
  .follow {
    flex-grow: 7;
    text-align: right;
    padding: 20px 10px 0 0;
    color: #f98700;
  }
}
</style>


